<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
	  <head>
	  	<title>TacoCloud</title>
	  	<style>
	  		*{
	  			padding:0;
	  			margin:0;
	  			box-sizing:border-box;
	  		}
	  		
			.father{
				width:40%;
				height:600px;
				margin:100px auto;
				border:2px solid black;
				display:flex;
				flex-wrap:wrap;
			}
			
			.A1{
				width:100%;
				height:20%;
				border:2px solid black;
				display: flex;
                justify-content: center;
                align-items: center;
			}
			
			.A1 input{
                border: rgb(145, 144, 144) 2px solid;
           		background: none;
               	width:20px;
			  	height:20px;
				position: absolute;
				left:65%;
			        
                       }

			.A2{
	  			width:100%;
	  			height:100px;
	  			margin:auto auto;
	  			position:relative;
				display: flex;
                justify-content: center;
                align-items: center;
                 
	  		}

			.A2 input{
                border: rgb(145, 144, 144) 2px solid;
           		background: none;
               	width:150px;
			  	height:60px;
				position: absolute;

			        
                       }
			.A2 .A21{
					margin-top:130px;
			}
			.tui{
	  			position: absolute;
	  			top: 60px;
	  			right:60px;
	  		}
	  		.tui button{
	  			width: 300px;
	  			height: 60px;
	  			background-color: white;
	  			border-radius: 10px 10px 10px 10px;	
	  		}
	  	</style>
	  	<script type="text/javascript">
	  	  function bat(){	  		  
	  	    window.open("End");
	  	  } 
	  	function tui(){
    		window.location.href="http://localhost:8080/home/Home"	
    	}
	  	</script>
	  </head>
	  

	  <body>
	     <form>
	  	<div class="father">
		    
			<div class="A1">
				<p>Java Web开发技术</p>
                <input type="checkbox" id="checkbox" name="checkbox" value="Java Web开发技术">
			</div>
			<div class="A1">
				<p>软件设计与实例分析</p>
				<input type="checkbox" id="checkbox" name="checkbox" value="软件设计与实例分析">
			</div>
			<div class="A1">
				<p>计算机网络</p>
				<input type="checkbox" id="checkbox" name="checkbox" value="计算机网络">
			</div>
			<div class="A1">
				<p>算法设计与分析</p>
				<input type="checkbox" id="checkbox" name="checkbox" value="算法设计与分析">
			</div>
			<div class="A1">
				<p>计算机组成原理</p>
				<input type="checkbox"id="checkbox" name="checkbox" value="计算机组成原理">
			</div>
		     
		</div> 
		<div class=A2>	    	        
	    	 <input type="submit" value="提交" onclick="bat()">				      			
	    </div>
	      </form>
	    <div class="tui">
	    	<button onclick="tui()">退出登录</button>
	    </div>	
	  </body>
	
</html>